<template>
    <div ref="chartContainer" :style="{ width: '100%', height: '200px' }"></div>
</template>
<script setup>
import * as echarts from 'echarts';
import { onMounted, ref } from 'vue';
const chartContainer = ref(null);
onMounted(() => {
    initEcharts()

});
function initEcharts() {
    const myChart = echarts.init(chartContainer.value);
    // 配置你的图表选项
    var xData = [
        '0点',
        '1点',
        '2点',
        '3点',
        '4点',
        '5点',
        '6点',
        '7点',
        '8点',
        '9点',
        '10点',
        '11点',
        '12点',
        '13点',
        '14点',
        '15点',
        '16点',
        '17点',
        '18点',
        '19点',
        '20点',
        '21点',
        '22点',
        '23点',
        '24点',
    ];
    let option = {
        grid: {
            left: '2%',
            right: '0%',
            top: '15%',
            bottom: '5%',
            containLabel: true,
        },
        tooltip: {
            show: true,
            trigger: 'axis',
            backgroundColor: '#79a9d326',
            textStyle: {
                fontSize:8,
                color: '#8BC4F2' // 设置提示框字体颜色为蓝色
            },
        },
        xAxis: [{
            type: 'category',
            axisLine: {
                show: false,
                lineStyle: {
                    color: '#85C1D9',
                    fontSize:8
                },
            },
            axisTick: {
                show: false,
            },
            axisLabel: {
                color: '#8BC4F2',
                margin: 10,
                fontSize:8,
            },
            splitLine: {
                show: false,
            },
            boundaryGap: ['5%', '5%'],
            data: xData,
        },],
        yAxis: [{
            type: 'value',
            position: 'right', // 设置纵坐标在右边
            axisLabel: {
                color: '#8BC4F2',
                margin: 1,
                fontSize:8,
            },
            splitLine: {
                show:false,
                lineStyle: {
                    color: '#355C84',
                    type: 'dashed',
                },
            },
        },],
        series: [{
            type: 'line',
            symbolSize: 0,
            itemStyle: {
                color: '#55EFF1',
                borderColor: '#FFF500',
                borderWidth: 1,
            },
            data: [120, 132, 101, 134, 90, 432, 421, 234, 230, 210, 182, 191, 234, 290, 330, 42, 471, 78, 98, 17, 78, 85, 190, 93, 87,],
        },],
    };
    myChart.setOption(option);
}
</script>